<template>
  <div class="url-encoder-page">
    <div class="encoder-container">
      <h1>URL编码解码</h1>
      <el-form>
        <el-form-item label="输入URL">
          <el-input 
            v-model="inputUrl" 
            type="textarea" 
            :rows="5" 
            placeholder="请输入要编码或解码的URL"
          />
        </el-form-item>

        <el-form-item label="编码方式">
          <el-radio-group v-model="encodeType">
            <el-radio label="encodeURI">encodeURI</el-radio>
            <el-radio label="encodeURIComponent">encodeURIComponent</el-radio>
          </el-radio-group>
        </el-form-item>

        <div class="button-group">
          <el-button type="primary" @click="encodeUrl">
            <el-icon><Lock /></el-icon>
            编码
          </el-button>
          <el-button type="success" @click="decodeUrl">
            <el-icon><Unlock /></el-icon>
            解码
          </el-button>
          <el-button type="info" @click="copyResult">
            <el-icon><DocumentCopy /></el-icon>
            复制结果
          </el-button>
          <el-button @click="showDemo">
            <el-icon><Monitor /></el-icon>
            Demo
          </el-button>
          <el-button type="warning" @click="goToHomepage">
            <el-icon><Back /></el-icon>
            返回
          </el-button>
        </div>

        <div class="result-area" v-if="result">
          <el-form-item label="结果">
            <el-input 
              v-model="result" 
              type="textarea" 
              :rows="5" 
              readonly
            />
          </el-form-item>
        </div>
      </el-form>

      <div class="notes">
        <h3>关于URL编码：</h3>
        <ul>
          <li><strong>encodeURI：</strong>不会对特殊符号编码。<br>例如：https://www.example.com/</li>
          <li><strong>encodeURIComponent：</strong>会对特殊符号编码。<br>例如：https%3A%2F%2Fwww.example.com%2F</li>
          <li>URL编码主要用于将URL中的非ASCII字符转换为可传输的格式</li>
          <li>编码可以防止URL中的特殊字符造成的解析错误</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Lock, Unlock, DocumentCopy, Back, Monitor } from '@element-plus/icons-vue'

const router = useRouter()
const inputUrl = ref('')
const result = ref('')
const encodeType = ref('encodeURI')

const encodeUrl = () => {
  if (!inputUrl.value.trim()) {
    ElMessage.warning('请输入需要编码的URL')
    return
  }
  
  result.value = encodeType.value === 'encodeURI' 
    ? encodeURI(inputUrl.value) 
    : encodeURIComponent(inputUrl.value)
  
  ElMessage.success('编码成功')
}

const decodeUrl = () => {
  if (!inputUrl.value.trim()) {
    ElMessage.warning('请输入需要解码的URL')
    return
  }

  try {
    result.value = encodeType.value === 'encodeURI'
      ? decodeURI(inputUrl.value)
      : decodeURIComponent(inputUrl.value)
    ElMessage.success('解码成功')
  } catch (error) {
    ElMessage.error('解码失败，请检查输入的URL是否正确')
  }
}

const copyResult = () => {
  if (!result.value) {
    ElMessage.warning('没有可复制的结果')
    return
  }

  navigator.clipboard.writeText(result.value)
    .then(() => ElMessage.success('已复制到剪贴板'))
    .catch(() => ElMessage.error('复制失败，请手动复制'))
}

const showDemo = () => {
  inputUrl.value = 'https://www.example.com/?param=测试&page=1'
}

const goToHomepage = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.url-encoder-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;

  .encoder-container {
    max-width: 800px;
    width: 96%;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    padding: 20px;
    box-sizing: border-box;
    margin: 10px auto;

    h1 {
      text-align: center;
      color: #4a5568;
      font-size: 24px;
      margin-bottom: 20px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .el-form {
      .el-form-item {
        margin-bottom: 20px;

        :deep(.el-form-item__label) {
          font-weight: 500;
          color: #4a5568;
          padding-bottom: 8px;
        }

        .el-textarea {
          :deep(.el-textarea__inner) {
            font-family: 'Monaco', 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            padding: 12px;
            border-radius: 8px;
            resize: vertical;
            min-height: 120px;
            border-color: #dcdfe6;
            
            &:focus {
              border-color: #409EFF;
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
            }
          }
        }

        .el-radio-group {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
          margin: 10px 0;

          .el-radio {
            margin: 0;
            padding: 8px 0;
          }
        }
      }
    }

    .button-group {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
      margin: 20px 0;

      .el-button {
        min-width: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 16px;
        font-size: 14px;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .el-icon {
          font-size: 16px;
        }

        &.is-disabled {
          opacity: 0.7;
          cursor: not-allowed;
          transform: none;
        }
      }
    }

    .result-area {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px dashed #ddd;

      .el-textarea {
        :deep(.el-textarea__inner) {
          background-color: #f8fafc;
          cursor: text;
        }
      }
    }

    .notes {
      margin-top: 30px;
      padding: 15px;
      background-color: #f0f5ff;
      border-radius: 12px;
      color: #606266;
      text-align: left;

      h3 {
        color: #409EFF;
        margin: 0 0 12px 0;
        font-size: 16px;
        text-align: left;
      }

      ul {
        margin: 0;
        padding-left: 0;
        list-style-type: none;
        text-align: left;

        li {
          margin-bottom: 10px;
          line-height: 1.6;
          position: relative;
          padding-left: 18px;
          font-size: 14px;
          text-align: left;

          &:before {
            content: "•";
            color: #409EFF;
            font-size: 18px;
            position: absolute;
            left: 0;
            top: -2px;
          }

          strong {
            color: #409EFF;
            font-weight: 500;
            display: inline-block;
          }

          br {
            display: block;
            margin: 5px 0;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

// 平板设备优化
@media (max-width: 768px) {
  .url-encoder-page {
    padding: 8px;

    .encoder-container {
      width: 98%;
      padding: 15px;
      margin: 5px auto;

      h1 {
        font-size: 22px;
        margin-bottom: 15px;
      }

      .el-form {
        .el-form-item {
          margin-bottom: 15px;

          .el-radio-group {
            gap: 10px;
          }
        }
      }

      .button-group {
        gap: 8px;
        margin: 15px 0;

        .el-button {
          min-width: 100px;
          padding: 8px 12px;
          font-size: 13px;
        }
      }
    }
  }
}

// 手机设备优化
@media (max-width: 480px) {
  .url-encoder-page {
    padding: 5px;

    .encoder-container {
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      margin: 0;

      h1 {
        font-size: 20px;
      }

      .el-form {
        .el-form-item {
          :deep(.el-form-item__label) {
            font-size: 14px;
          }

          .el-textarea {
            :deep(.el-textarea__inner) {
              font-size: 13px;
              min-height: 100px;
            }
          }

          .el-radio-group {
            flex-direction: column;
            gap: 5px;

            .el-radio {
              padding: 5px 0;
            }
          }
        }
      }

      .button-group {
        flex-direction: column;
        gap: 8px;

        .el-button {
          width: 100%;
          margin: 0;
        }
      }

      .notes {
        padding: 12px;
        margin-top: 20px;

        h3 {
          font-size: 15px;
        }

        ul li {
          font-size: 13px;
          margin-bottom: 8px;
        }
      }
    }
  }
}

// 超小屏幕优化
@media (max-width: 320px) {
  .url-encoder-page {
    .encoder-container {
      border-radius: 0;

      h1 {
        font-size: 18px;
      }

      .el-form {
        .el-form-item {
          :deep(.el-form-item__label) {
            font-size: 13px;
          }
        }
      }

      .notes {
        padding: 10px;

        h3 {
          font-size: 14px;
        }

        ul li {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
